<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="css/bootstrap-table.min.css" />
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap-table.js" ></script>
		<script type="text/javascript" src="js/bootstrap-table-zh-CN.js" ></script>
		
	</head>
	<body>
		<div class="bootstrap-table">
				<div id="toolbar" class="btn-group">
				   <button id="btn_add" type="button" class="btn btn-default">
				    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
				   </button>
				   <button id="btn_edit" type="button" class="btn btn-default">
				    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
				   </button>
				   <button id="btn_delete" type="button" class="btn btn-default">
				    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
				   </button>
				   <button type="button"  id="getselectrow"  class="btn btn-default">
				    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>获取选择行
				   </button>
			    </div>
				<table id="demo" class="table fixed-table-container"></table>
		</div>
		<script>
			
			$(function(){
				
				$('#demo').bootstrapTable(
								{
									width:'80%',
									height:'600px',
									striped:true,
									onlyInfoPagination:true,
								
									selectItemName:'workid',
									showColumns:true,
									search:true,
									clickToSelect: true,
									rowStyle:rowStyle,
									uniqueId: "workid",
									 showToggle:true,     //是否显示详细视图和列表视图的切换按钮
   									cardView: false,
									 pagination:true,
									 sidePagination: "client",   //分页方式：client客户端分页，server服务端分页（*）
								   pageNumber:1,      //初始化加载第一页，默认第一页
								   pageSize: 10,      //每页的记录行数（*）
								   pageList: [10, 25, 50, 100],  //可供选择的每页的行数（*）
   									toolbar: '#toolbar',    //工具按钮用哪个容器
									sortStable:true,
									icons:{
									paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',
								
									},
									CustomSort:customSort,
									
									
									undefinedText:"找不到",
									columns:[
										{
											field:'ck',
											checkbox:true,
											align:'center'
										},
										
										{
											title:'工作编号',
											field:'workid',
											sortable: true,
											formatter:nameFormatter,
											sorter:priceSorter
										},
										{
											title:'员工姓名',
											field:'tname',
											switchable:true //使该列不能够被隐藏
										
										},{
											title:'年龄',
											field:'age'
										},
										
										{
											title:'工龄/年',
											field:'worktime'
										},{
											title:'总收入',
											field:'sum',
											visible:false//该选项可以被选择隐藏和显示
										}
									],
									data:[
										{
											workid:1,
											tname:'李思',
											age:25,
											worktime:'3',
											
											sum:'1520'
										},{
											workid:3,
											tname:'李思2',
											age:20,
											worktime:'1',
											sum:'1000',
										
										},
										{
											workid:2,
											tname:'李思远',
											age:25,
											worktime:'5',
											sum:'1520'
										}
									]
								}
					
				);
				//获取选择行数据
				$("#getselectrow").on("click",function(){
					//var arr=	$("#demo").bootstrapTable("getSelections");
					//获取数据
					//var arr=	$("#demo").bootstrapTable("getData");
					//加载数据
					//var arr=	$("#demo").bootstrapTable("load",randomData());
				
					var arr = delone();
					
           	 		
					$("#demo").bootstrapTable("remove",{field:'workid',values:arr});
				});
				function delone(){
					var val=	$("#demo").bootstrapTable("getSelections");
					
					return val;
				}
				
				//模拟加载
				function randomData() {
		        var startId = ~~(Math.random() * 100),
		            rows = [];
		
		        for (var i = 0; i < 10; i++) {
		            rows.push({
		                workid: startId + i,
		                tname: 'test' + (startId + i),
		                age:i,
		                worktime:(i%10)+i,
		                sum: '$' + (startId + 1000)
           			});
      			 }
        return rows;
    }
				
			});
			//行格式化样式
			 function nameFormatter(value, row) {
		        var icon = row.workid % 2 === 0 ? 'glyphicon-star' : 'glyphicon-star-empty'
		        return '<i class="glyphicon ' + icon + '"></i> ' + value;
   			 }
			//行样式渲染 
			function rowStyle(row, index) {
      		  var classes = ['active', 'success', 'info', 'warning', 'danger'];

        	if (index % 2 === 0 && index / 2 < classes.length) {
            					return  {classes: classes[index / 2]};
        	}
        			return {};
 		  	}
			   
			//某一列的排序
		    function priceSorter(a, b) {
				console.log(a+".."+b);
				
		        if (a > b) return 1;
		        if (a < b) return -1;
		        return 0;
		    }
  			function customSort(sortName, sortOrder) {
  				
  				console.log(sortName);
  				console.log(sortOrder);
            //Sort logic here.
            //You must use `this.data` array in order to sort the data. NO use `this.options.data`.
        	}
		</script>
	</body>
</html>
